<template>
	<div class="uploadBg" v-if="imgShow==1">
		<div class="uploadMian">
			<div class="uploadMian_top">
				图片
				<i class="el-icon-close" @click="closeFn"></i>
			</div>
			<div class="goodsShop_radio flex">
				<ul class="flex">
					<li class="flex" v-for="(item,index) in shopCommentType" @click="commentRadio(index)">
						<div :class="index==shopCommentIndex?'scenicTs_show':'' " class="scenicTs_checkbox">
							<i class="el-icon-check"></i>
						</div>
						<label>{{item.title}}</label>
					</li>

				</ul>

				<el-upload title="点击上传" class="background" :multiple="true" :action='requestUrl.api.uploadImg' 
					:show-file-list="false" :on-success="successBg"  :before-upload="beforeVideo" :data="{type:1,mch_type:shopCommentIndex,}" name="image">
					<el-button type="primary" size="small">上传</el-button>
				</el-upload>

			</div>
			<div class="uploadMian_mian">
				<ul>
					<li v-for="(item,index) in imgData" @click="selectFn(index)">
						<img :src="item.image" />

						<div class="select_img" v-if="item.is_show ==1">
							<i class="el-icon-check"></i>
						</div>

						<div class="uploadMian_btn">
							<!--<button style="background:#0083ff;" @click="choiceFn(index)">选择</button>-->

							<button style="float:right;background: red;" @click="deleteFn(index)">删除</button>
						</div>

					</li>
				</ul>
			</div>

			<div id="page_box">
				<el-pagination @current-change="userChange" background :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,jumper" :total="sizeTotal">
				</el-pagination>
			</div>

			<div class="imgBtn">
				<el-button size="medium" @click="confirmFn" type="primary">确认</el-button>
				<el-button size="medium" @click="closeFn">取消</el-button>
			</div>

		</div>

	</div>

</template>

<script>
	import requestUrl from '@/util/requestUrl'
	import utils from '@/util/utils'
	export default {
		name: 'wangEditor',
		props: {
			imgShow: {
				type: Number,
				default: 0
			},

			/**
			 * 图片返回的数据类型
			 * type:0,直接返回图片res.image
			 * type:1,返回一维数组 arr:['image','image']
			 * type:2,返回二维数组 arr:[{image:''},{image:""}]
			 * value:二维数组的图片字段名
			 * attr:数组要加的属性*/
			imgType: {
				type: Object,
				default: {
					type: 0,
					value: "image"
				}
			}
		},
		data() {
			return {
				requestUrl: requestUrl,
				pageSize: 15,
				sizeTotal: 10,
				currentPage: 1,
				imgData: [{
					image: "http://img3.redocn.com/tupian/20150211/chouxiangqicailuoxuanxuanzhuanxiantiaoguangdianzuhetusucaieps_3940262.jpg",
				}, ],

				shopCommentIndex: 0,
				shopCommentType: [{
						title: "景点",
						status: 0,
					}, {
						title: "美食",
						status: 1,
					},
					{
						title: "住宿",
						status: 2,
					},
					{
						title: "娱乐",
						status: 3,
					},
					{
						title: "出行",
						status: 4,
					},

					{
						title: "商品",
						status: 5,
					},

					{
						title: "其他",
						status: 6,
					}
				],
			}
		},
		destory() {

		},
		mounted() {
			this.selImg(1); //查询图片
		},
		methods: {

			//关闭
			closeFn: function(res) {
				this.$emit('closeFn', {
					show: 0
				})
			},

			//选择
			choiceFn: function(index) {
				var list = this.imgData;
				this.$emit('getImg', list[index])
			},

			//选择评论状态
			commentRadio: function(index) {
				this.shopCommentIndex = index;
				this.selImg(1)
			},

			//删除
			deleteFn: function(index) {
				var _this = this;
				var list = this.imgData;
				utils.delTips(this, function(res) {
					if(list[index].id > 0) {
						_this.$axios.post(requestUrl.api.delImg, {
								id: list[index].id,
								token: requestUrl.userToken,
							}).then((res) => {
								if(res.data.code == 1) {
									_this.$message('操作成功');
									_this.selImg(1)
								} else {
									_this.$message.error(res.data.msg);
								}
							})
							.catch((res) => {
								_this.$message.error('操作失败');
							});
					} else {

						list.splice(index, 1);
						_this.bannerList = list;
					}
				})
			},

			//图片上传
			successBg: function(res) {
				if(res.code == 1) {
					this.selImg(1)
				}
			},

			//选择图片
			selectFn: function(index) {
				let statu = this.imgData[index].is_show ? 0 : 1;
				this.$set(this.imgData[index], "is_show", statu);
			},

			//确认选择图片
			confirmFn: function(res) {
				let data = this.imgData,
					imgType = this.imgType,
					arr = [],
					obj = [];
				if(imgType.type == 1) {
					data.forEach((v, i) => {
						if(v.is_show == 1) {
							arr.push(v.image);
						}
					});
					
				} else if(imgType.type == 2) {
					data.forEach((v, i) => {
						if(v.is_show == 1) {
							var end = {[imgType.value]: v.image};
							
							//判断是否需要拼属性
							if(imgType.attr){
								end = Object.assign(end,imgType.attr)	
							}
							arr.push(end);
						}
					});
					
				} else {
					for(var i=0;i<data.length;i++){
						if(data[i].is_show ==1){
							arr.push({
								image:data[i].image
							});
							break;
						}
					}
					
				}
				
				if(arr.length<=0){
					this.$message.error('您还未选择图片');
					return
				}
				
				obj = arr;
				this.$emit('getImg', obj)
			},
				
				beforeVideo:function(res){
					console.log(res,'ssssss')
				},

			//查询背景图
			selImg: function(page) {
				this.$axios.get(requestUrl.api.uploadImg, {
						params: {
							token: requestUrl.userToken,
							pageSize: this.pageSize,
							page: page,
							mch_type: this.shopCommentIndex,
						}
					}).then((res) => {
						if(res.data.code == 1) {
							this.imgData = res.data.data.data;
							this.sizeTotal = res.data.data.total
						} else {
							this.imgData = [];
							this.sizeTotal = 0
						}
					})
					.catch((res) => {

					});
			},

			userChange: function(res) {
				this.selImg(res)
			},

		},
		watch: {
			initText() {

			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.uploadBg {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		background: rgba(000, 000, 000, 0.5);
	}
	
	.el-message-box__wrapper {
		width: 100%;
		height: 100vh;
		background: rgba(000, 000, 000, 0.5);
		z-index: 10000000 !important;
	}
	
	.goodsShop_radio {
		width: 96%;
		margin: 15px auto auto auto;
		justify-content: space-between;
		li {
			margin-right: 10px;
		}
		label {
			margin-left: 5px;
		}
	}
	
	#page_box {
		width: 96%;
		text-align: center;
		padding: 5px 2%;
	}
	
	.imgBtn {
		width: 100%;
		padding: 10px 20px;
		box-sizing: border-box;
		text-align: right;
	}
	
	.uploadMian {
		width: 800px;
		height: 720px;
		margin: auto;
		background: #fff;
		transform: translate(-50%, -50%);
		position: fixed;
		left: 50%;
		top: 50%;
	}
	
	.uploadMian_top {
		width: 96%;
		height: 40px;
		background: #eee;
		line-height: 40px;
		padding: 0px 2%;
		i {
			float: right;
			margin-top: 10px;
			font-size: 20px;
			cursor: pointer;
		}
	}
	
	.uploadMian_mian {
		width: 99%;
		height: 470px;
		padding: 5px 0%;
		margin: 10px auto;
	}
	
	.uploadMian_mian ul li {
		width: 130px;
		height: 130px;
		float: left;
		border: 1px solid #eee;
		margin-left: 15px;
		padding: 5px;
		margin-bottom: 15px;
		position: relative;
		.select_img {
			width: 100%;
			height: 100%;
			line-height: 140px;
			background: rgba(000, 000, 000, 0.6);
			position: absolute;
			text-align: center;
			top: 0;
			left: 0;
			i {
				font-size: 30px;
				color: #fff;
			}
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	
	.uploadMian_btn {
		width: 93%;
		display: none;
		position: absolute;
		bottom: 5px;
		background: rgba(000, 000, 000, 0.5);
		button {
			width: 45%;
			height: 28px;
			line-height: 28px;
			text-align: center;
			float: left;
			color: #fff;
			border: 0;
			border-radius: 3px;
			cursor: pointer;
		}
	}
	
	.uploadMian_mian ul li:hover .uploadMian_btn {
		display: block;
	}
</style>